<template>
  <div>
    <div class="VIP">
      <h1>VIP会员</h1>

      <VIPsecKill></VIPsecKill>

      <el-row>
        <el-col
          :xs="24"
          :md="12"
          :lg="6"
          :xl="6"
          v-for="item in member"
          :key="item.id"
        >
          <div>
            <el-radio-group v-model="radio">
              <el-radio-button :label="item">
                <el-card class="box-card1">
                  <h2>{{ item.memberName }}</h2>
                  <span>￥{{ item.price }}</span>
                  
                </el-card>
              </el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="pay">
      <el-card class="box-card2">
        <div class="Code">
          <img src="@/assets/img/二维码.png" width="150px" />
          <div><span>扫码支付</span></div>
        </div>
        <div class="pay_right">
          实付款：<span> {{ radio.price }}</span
          >元
          <el-button type="primary" icon="el-icon-s-finance" @click="goPay()">支付宝支付</el-button>
        </div>
        
      </el-card>
      
    </div>
  </div>
</template>

<script>

import {getAllMember} from '@/api/member'
import {getUserInfo} from '@/api/user'
import {getToken} from '@/request/token'
import {buyMember} from '@/api/orderMember'
import VIPsecKill from './card/VIPsecKill.vue'
export default {
    created() {
        getAllMember().then(res => {
            this.member = res.data;
            this.radio = res.data[0];
        });
    },
    methods: {
        goPay() {
            const token = getToken();
            if (token != null) {
                getUserInfo(token).then(res => {
                    if (!res.success) {
                        return this.$message.error("未登录");
                    }
                    else {
                        this.userId = res.data.id;
                        const order={
                          userId:this.userId,
                          memberId:this.radio.id
                        }
                        window.location.href=buyMember(order) 
                        // buyMember(order).then(res=>{
                        //   console.log(res);
                        // })
                    }
                });
            }
        },
    },
    data() {
        return {
            member: [],
            radio: "",
            userId: "",
        };
    },
    components: { VIPsecKill }
}
</script>

<style scoped lang="less">
/deep/.el-radio-button__inner {
  width: 250px;
  height: 130px;
  padding: 3px;
}
.box-card1 {
  // width: 100%;
  font-weight: bold;
  height: 99%;
  color: rgb(233, 93, 93);
}
.box-card1 span {
  font-size: 20px;

  color: rgb(233, 93, 93);
}
.VIP {
  background: rgb(255, 255, 255);
  padding: 30px;
}
.pay {
  background: rgb(255, 255, 255);

  padding: 30px;
}

.Code {
  float: left;
  padding: 20px;
  width: 150px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  height: 150px;

  background: rgb(255, 255, 255);
}
.pay_right {
  float: left;
  margin-left: 10px;
  margin-top: 60px;
  background: rgb(255, 255, 255);
}
.pay_right span {
  font-size: 20px;
  font-weight: bold;
  color: rgb(206, 80, 80);
}
// .item {
//    padding: 10px;
// }
h1 {
  color: rgb(205, 120, 7);
}
h2 {
  color: rgb(205, 120, 7);
}

.box-card2 {
  height: 250px;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: rgb(205, 120, 7);
}

</style>